<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <ul>
            <!-- 会循环生成9个li -->
            <!-- v就是从1到9的数字 -->
            <li v-for="v in 9">隔壁老王 -- {{ v }}</li>
        </ul>

        <ul>
            <!-- 遍历list数组，这个数组有多少个元素就会产生多少个li -->
            <!-- item:就是被遍历到的每个元素 -->
            <!-- index：就是被遍历到的下标 -->
            <!-- 名字不一定要叫item和index -->
            <!-- 可以随便叫，但是第一个一定是元素，第二个一定是下标 -->
            <li v-for="(item, index) in list">{{ item }} -- {{ index }}</li>
        </ul>

        <ul>
            <!-- 遍历obj这个对象，对象有多少个属性，就会生成多少个li -->
            <!-- val就是每一个被遍历到的属性值 -->
            <!-- key就是每一个被遍历到的属性名 -->
            <!-- 也不一定要叫val和key，也可以叫别的名字 -->
            <!-- 但是第一个一定是属性值，第二个一定是属性名 -->
            <li v-for="(val,key) in obj"> {{ val }} -- {{ key }}</li>
        </ul>
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',

            data: {

                list: ['老王', '老周', '老韩'],
                obj: {
                    name: 'jack',
                    age: 16,
                    gender: '男'
                }
            }
        })
    </script>
</body>

</html>